<template>
  <div class="main-content" v-loading="viewLoading">
    <div style="font-size: 20px; margin-bottom: 20px">我预约的服务订单</div>

    <div class="user-order">
      <h2 class="m-t-20 m-b-20">保洁：</h2>
      <div>
        <el-table :data="tabledata1" style="width: 100%" strip>
          <el-table-column
            prop="id"
            label="订单号"
            width="70"
            align="center"
          ></el-table-column>

          <el-table-column
            prop="user.name"
            label="联系人"
            align="center"
            width="70"
          >
          </el-table-column>

          <el-table-column
            prop="fuwudate"
            label="下单时间"
            align="center"
            width="150"
          >
          </el-table-column>

          <el-table-column
            prop="type"
            label="订单类型"
            align="center"
            width="150"
          >
            <template v-slot="scope">
              {{ scope.row.fuwudate.slice(0, 16) }}
            </template>
          </el-table-column>

          <!-- <el-table-column
            prop="fuwudate"
            label="服务时间"
            align="center"
            width="150"
          >
            <template v-slot="scope">
              {{ scope.row.fuwudate.slice(0, 16) }}
            </template>
          </el-table-column> -->

          <el-table-column
            prop="type.fuwurenshu"
            label="服务人数"
            align="center"
            width="100"
          >
            <template v-slot="scope">
              {{ scope.row.json.fuwurenshu }} 人
            </template>
          </el-table-column>

          <el-table-column
            prop="jiner"
            label="金额："
            align="center"
            width="100"
          >
          </el-table-column>

          <el-table-column prop="paymentStatus" label="订单状态" align="center">
            <template v-slot="scope">
              <el-tag :type="getTabType(scope.row.paymentStatus).type">
                {{ getTabType(scope.row.paymentStatus).text }}</el-tag
              >
            </template>
          </el-table-column>

          <el-table-column
            prop="dizhi"
            label="服务地址"
            show-overflow-tooltip
            align="center"
            width="100"
          ></el-table-column>

          <el-table-column
            prop="phone"
            label="联系方式"
            align="center"
            width="150"
          ></el-table-column>

          <el-table-column
            prop="leavingAMessage"
            label="留言"
            align="center"
            width="70"
            show-overflow-tooltip
          >
          </el-table-column>

          <el-table-column
            label="操作"
            align="center"
            width="280"
            fixed="right"
          >
            <template v-slot="scope">
              <el-button
                v-if="
                  scope.row.paymentStatus != 0 && scope.row.paymentStatus != 4
                "
                size="mini"
                type="success"
                plain
                @click="payClick(scope)"
                >支付费用</el-button
              >
              <el-button size="mini" type="success" plain disabled v-else
                >已支付</el-button
              >
              <el-button
                size="mini"
                type="danger"
                plain
                @click="qvxiaodingdan(scope)"
                >取消预约</el-button
              >
              <el-button
                size="mini"
                type="danger"
                plain
                @click="deleteItem(scope)"
                >删除订单</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="user-order">
      <h2 class="m-t-20 m-b-20">点餐：</h2>
      <div>
        <el-table :data="tabledata2" style="width: 100%" strip>
          <el-table-column
            prop="id"
            label="订单号"
            width="70"
            align="center"
          ></el-table-column>

          <el-table-column label="餐点" align="center" width="70" type="expand">
            <template slot-scope="props">
              <div
                class="flex justify-between"
                v-if="props.row.json.currentRow"
              >
                <el-card
                  :body-style="{ padding: '0px' }"
                  v-for="(o, i) in props.row.json.currentRow"
                  :key="i"
                  class="flex-1 m-l-10 m-r-10"
                >
                  <div class="flex-y-center">
                    <img :src="o.img" class="image" />
                    <span class="text-align m-l-10">{{ o.cm }}</span>
                  </div>
                </el-card>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            prop="user.name"
            label="联系人"
            align="center"
            width="70"
          >
          </el-table-column>

          <el-table-column
            prop="phone"
            label="联系方式"
            align="center"
            width="150"
          ></el-table-column>

          <el-table-column
            prop="jiner"
            label="金额："
            align="center"
            width="100"
          >
          </el-table-column>

          <el-table-column prop="paymentStatus" label="订单状态" align="center">
            <template v-slot="scope">
              <el-tag :type="getTabType(scope.row.paymentStatus).type">
                {{ getTabType(scope.row.paymentStatus).text }}</el-tag
              >
            </template>
          </el-table-column>

          <el-table-column
            prop="fuwudate"
            label="下单时间"
            align="center"
            width="150"
          >
          </el-table-column>

          <el-table-column
            prop="dizhi"
            label="地址"
            show-overflow-tooltip
            align="center"
            width="100"
          ></el-table-column>

          <el-table-column
            prop="leavingAMessage"
            label="留言"
            align="center"
            width="70"
            show-overflow-tooltip
          >
          </el-table-column>

          <el-table-column prop="paymentStatus" label="订单状态" align="center">
            <template v-slot="scope">
              <el-tag :type="getTabType(scope.row.paymentStatus).type">
                {{ getTabType(scope.row.paymentStatus).text }}</el-tag
              >
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            align="center"
            width="280"
            fixed="right"
          >
            <template v-slot="scope">
              <el-button
                v-if="
                  scope.row.paymentStatus != 0 && scope.row.paymentStatus != 4
                "
                size="mini"
                type="success"
                plain
                @click="payClick(scope)"
                >支付费用
              </el-button>
              <el-button size="mini" type="success" plain disabled v-else
                >已支付</el-button
              >

              <el-button
                size="mini"
                type="danger"
                plain
                @click="qvxiaodingdan(scope)"
                >取消预约</el-button
              >
              <el-button
                size="mini"
                type="danger"
                plain
                @click="deleteItem(scope)"
                >删除订单</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="user-order">
      <h2 class="m-t-20 m-b-20">陪护：</h2>
      <div>
        <el-table :data="tabledata3" style="width: 100%" strip>
          <el-table-column
            prop="id"
            label="订单号"
            width="70"
            align="center"
          ></el-table-column>

          <el-table-column
            prop="user.name"
            label="用户"
            align="center"
            width="70"
          >
          </el-table-column>

          <el-table-column
            prop="fuwudate"
            label="下单时间"
            align="center"
            width="150"
          >
          </el-table-column>

          <el-table-column
            prop="dizhi"
            label="地址"
            show-overflow-tooltip
            align="center"
            width="70"
          ></el-table-column>

          <el-table-column
            prop="phone"
            label="联系方式"
            align="center"
            width="150"
          ></el-table-column>

          <el-table-column
            prop="jiner"
            label="金额："
            align="center"
            width="100"
          >
          </el-table-column>

          <el-table-column
            prop="fangan"
            label="方案"
            show-overflow-tooltip
            align="center"
            width="100"
          >
            <template v-slot="scope">
              <el-button @click="chakanfangan(scope)"> 查看方案</el-button>
            </template>
          </el-table-column>

          <el-table-column prop="paymentStatus" label="订单状态" align="center">
            <template v-slot="scope">
              <el-tag :type="getTabType(scope.row.paymentStatus).type">
                {{ getTabType(scope.row.paymentStatus).text }}</el-tag
              >
            </template>
          </el-table-column>

          <el-table-column
            prop="leavingAMessage"
            label="留言"
            align="center"
            width="70"
            show-overflow-tooltip
          >
          </el-table-column>

          <el-table-column
            label="操作"
            align="center"
            width="280"
            fixed="right"
          >
            <template v-slot="scope">
              <el-button
                v-if="
                  scope.row.paymentStatus != 0 && scope.row.paymentStatus != 4
                "
                size="mini"
                type="success"
                plain
                @click="payClick(scope)"
                >支付费用</el-button
              >
              <el-button size="mini" type="success" plain disabled v-else
                >已支付</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!--  -->
    <!--  -->
    <!--  -->
    <!--  -->
    <!--  -->
    <!--  -->
    <el-dialog title="查看方案" :visible.sync="dialogFanganshow">
      <div class="fanganview" v-if="dialogFangan">
        <div v-html="dialogFangan"></div>
      </div>
      <div v-else class="w-full h-50 flex-x-center"><h3>暂无方案</h3></div>
    </el-dialog>

    <Pay :show.sync="payShow" :orderData="paydata" />
  </div>
</template>

<script>
import { cloneDeep } from "lodash-es";
import dayjs from "dayjs";
import wangeditor from "wangeditor";
import Pay from "@/components/pay.vue";

import gongdoui from "@/assets/imgs/order/gongdoui.png";
import mantou from "@/assets/imgs/order/mantou.png";
import doujiang from "@/assets/imgs/order/doujiang.png";

import z1 from "@/assets/imgs/order/zhong/1.png";
import z2 from "@/assets/imgs/order/zhong/2.png";
import z3 from "@/assets/imgs/order/zhong/3.png";
import z4 from "@/assets/imgs/order/zhong/4.png";

import w1 from "@/assets/imgs/order/wan/1.png";
import w2 from "@/assets/imgs/order/wan/2.png";
import w3 from "@/assets/imgs/order/wan/3.png";
import w4 from "@/assets/imgs/order/wan/4.png";

function generateRandomString() {
  return (
    Math.random().toString(36).substring(2, 15) +
    Math.random().toString(36).substring(2, 15)
  );
}

const imgs = {
  1: [gongdoui, mantou, doujiang],
  2: [z1, z2, z3, z4],
  3: [w1, w2, w3, w4],
};
export default {
  components: { Pay },
  data() {
    return {
      user: JSON.parse(localStorage.getItem("xm-user") || "{}"),
      viewLoading: false,
      tabledata1: [],
      tabledata2: [],
      tabledata3: [],

      dialogFanganshow: false,
      dialogFangan: "",

      paydata: {},
      payShow: false,
    };
  },
  created() {
    this.init();
  },
  methods: {
    getTypeText(type, state, end) {
      let typeText =
        type == 1 ? "保洁订单" : type == 2 ? "点餐订单" : "陪护订单";
      return state + typeText + end;
    },
    payClick(scope) {
      // this.paydata.out_trade_no = scope.row.id
      // this.paydata.total_amount = scope.row.jiner;
      // this.paydata.subject = this.getTypeText(scope.row.type, "支付", "测试");

      const { type, jiner, fangan } = scope.row;
      if (type == 3) {
        if (jiner == "0" || fangan === null || fangan == "") {
          this.$alert("请先选择方案，再支付");
          return;
        }
      }

      this.paydata = JSON.parse(JSON.stringify(scope.row));
      this.payShow = true;

      // window.open(
      //   `http://localhost:9090/alipay/pay?out_trade_no=15ucvaqzhwfggxy5whs3v5__21&total_amount=100&subject=%E6%94%AF%E4%BB%98%E9%99%AA%E6%8A%A4%E8%AE%A2%E5%8D%95%E6%B5%8B%E8%AF%95`
      // );

      // this.$request.get(
      //   `/alipay/pay?out_trade_no=${this.paydata.out_trade_no}&total_amount=${this.paydata.total_amount}&subject=${this.paydata.subject}`
      // );\
      // 创建一个新的URLSearchParams实例
      // const params = new URLSearchParams();
      // for (const key in this.paydata) {
      //   params.append(key, this.paydata[key]);
      // }
      // window.location.href = `http://localhost:9090/alipay/pay?${params.toString()}`;
    },
    async init() {
      try {
        this.viewLoading = true;
        const res = await this.$request.get("/order/getlist");
        const userRes = await this.$request.get("/user/selectAll");
        if (res.code != 200) {
          this.$message.error(res.msg);
          return;
        }

        res.data = res.data.filter((fv) => fv.userId === this.user.id);

        this.tabledata1 = res.data.filter((fv) => {
          if (fv.type == "1" && fv.userdel != 1) {
            fv.json = JSON.parse(fv.json);
            fv.tag = {
              type: fv.paymentStatus == 1 ? "success" : "info",
              text: fv.paymentStatus == 1 ? "已支付" : "未支付",
            };
            fv.user = userRes.data.find((findv) => findv.id == fv.userId);
            return fv;
          }
        });

        this.tabledata2 = res.data.filter((fv) => {
          if (fv.type == "2" && fv.userdel != 1) {
            fv.json = JSON.parse(fv.json);
            const img = imgs[fv.json.currentIndex];
            fv.json.currentRow.forEach((forv, oi) => {
              forv.img = img[oi];
            });
            fv.user = userRes.data.find((findv) => findv.id == fv.userId);
            return fv;
          }
        });

        this.tabledata3 = res.data.filter((fv) => {
          if (fv.type == "3" && fv.userdel != 1) {
            fv.json = JSON.parse(fv.json);
            fv.user = userRes.data.find((findv) => findv.id == fv.userId);
            return fv;
          }
        });

        if (this.$route.query.action === "pay") {
          const row = res.data.at(-1);
          this.payClick({ row });
        }
      } catch (error) {
        console.log(error);
        this.$message.error("数据加载失败");
      } finally {
        this.viewLoading = false;
      }
    },
    getTabType(paymentStatus = 2) {
      const emen = {
        0: {
          type: "",
          text: "已支付",
        },
        1: {
          type: "warning",
          text: "未支付",
        },
        2: {
          type: "danger",
          text: "支付失败",
        },
        3: {
          type: "success",
          text: "已完成",
        },
        // 在这里以服务替换成为已支付
        4: {
          type: "success",
          text: "已支付",
        },
        5: {
          type: "danger",
          text: "订单以取消",
        },
      };

      return emen[paymentStatus];
    },
    getTableData(type, callback) {
      switch (type) {
        case "1":
          callback(this.tabledata1);
        case "2":
          callback(this.tabledata2);
        case "3":
          callback(this.tabledata3);
      }
    },
    chakanfangan({ row }) {
      this.dialogFanganshow = !this.dialogFanganshow;
      this.dialogFangan = row.fangan;
    },
    async qvxiaodingdan(scope) {
      const isAlert = await this.$confirm(`您确定要取消订单吗？`, {
        type: "warning",
      });
      if (isAlert !== "confirm") {
        return;
      }

      const res = await this.$request.put("/order/update", {
        id: scope.row.id,
        paymentStatus: 5,
      });
      if (res.code == 200) {
        const type = scope.row.type;
        switch (type) {
          case "1":
            this.tabledata1[scope.$index].paymentStatus = 5;
          case "2":
            this.tabledata2[scope.$index].paymentStatus = 5;
          case "3":
            this.tabledata3[scope.$index].paymentStatus = 5;
        }
        this.$message({ type: "success", message: "取消订单成功" });
      } else {
        this.$message({ type: "error", message: res.msg });
      }
    },
    async deleteItem(scope) {
      const isAlert = await this.$confirm(`您确定要取消订单吗？`, {
        type: "warning",
      });
      if (isAlert !== "confirm") {
        return;
      }

      const res = await this.$request.put("/order/update", {
        id: scope.row.id,
        userdel: 1,
      });
      if (res.code == 200) {
        this.$message({ type: "success", message: "取消订单成功" });
        this.init();
      } else {
        this.$message({ type: "error", message: res.msg });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.fanganview {
  width: 100%;
  border: 1px solid #e4e7ed;
  padding: 20px;
  overflow-y: scroll;
  box-shadow: inset 0 0 10px rgba(172, 172, 172, 0.5);

  &::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
  }
}
</style>
